<template>
    <view>
        <view class="daochu-box">
            <mescroll-body height="auto" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
                           :down="downOption" :up="upOption">
                <view class="shenpi-list" v-for="(item,index) in dataList" :key="index">
                    <view class="shenpi-flex" @tap="goto_detail(item)">
                        <view>{{item.site_name}}</view>
                        <view class="shenpi-about">结束时间：{{item.endtime}}</view>
                    </view>
                </view>
            </mescroll-body>
        </view>
    </view>
</template>

<script>
    import {mapState} from 'vuex';
    import util from '@/lib/utils/index.js';
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                id: 0,
                dataList: [],
                mescroll: null, //mescroll实例对象 (此行可删,mixins已默认)
                // 下拉刷新的常用配置
                downOption: {
                    use: true, // 是否启用下拉刷新; 默认true
                    auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                    native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
                },
                // 上拉加载的常用配置
                upOption: {
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 20 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
            }
        },
        onShow() {
            if (this.userInfo.token == undefined) {
                this.loginOut();
            } else {
                this.canReset && this.mescroll.resetUpScroll() // 自行实现的刷新指定一条数据
				this.canReset && this.mescroll.scrollTo(0,0)
                this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
            }
        },
        onLoad(ops) {
            this.id = ops.id
        },
        computed: {
            ...mapState(['userInfo']),
        },
        methods: {
            loginOut() {
                this.$lib.$store.commit('clearUserInfo')
                // this.$lib.$store.commit('setUserInfo','')
                uni.reLaunch({
                    url: '/pages/login/index'
                })
            },
            /*上拉加载的回调*/
            async upCallback(page, item) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let res = await this.$lib.$http.post({
                    url: this.$lib.$urlMap.XunJianList,
                    data: {
                        id: this.id,
                        page: pageNum,
                        limit: pageSize
                    },
                    needLogin: true
                })
                if (res.code == 1) {
                    // console.log(res)
                    // 接口返回的当前页数据列表 (数组)
                    let curPageData = res.data.data;
                    // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                    let curPageLen = curPageData.length;
                    // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                    // let totalPage =Math.ceil(totalSize/pageSize);
                    // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                    let totalSize = res.data.length;
                    // 接口返回的是否有下一页 (true/false)
                    // let hasNext = data.xxx;
                    this.mescroll.endBySize(curPageLen, totalSize);

                    //设置列表数据
                    if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
                    this.dataList = this.dataList.concat(curPageData); //追加新数据
					 for (let i = 0, leng = this.dataList.length; i < leng; i++) {
					            this.dataList[i].endtime = this.formatTime(
					              this.dataList[i].endtime
					            )
					          }
                } else {
                    this.mescroll.endErr()
                }
            },
            formatTime(time) {
                time = (time == 0) ? 0 : util.timestampToTime(time)
                return time
            },
            goto_detail(item) {
                uni.navigateTo({
                    url: '/pages/xunjian/index?id=' + item.id
                })
            }
        },
    }
</script>

<style>
    page {
        background: #f5f5f5;
    }

    .daochu-box {
        font-size: 16px;
        padding-top: 14px;
    }

    .shenpi-list {
        padding: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border-radius: 5px;
        box-shadow: 1px 2px 4px rgb(2 2 2 / 5%);
        width: 84%;
        margin: 0 auto;
        margin-bottom: 14px;
    }

    .shenpi-flex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 16px;
        flex: 1;
    }

    .shenpi-about {
        color: #9b9b9c;
        font-size: 14px;
        margin-top: 5px;
    }
</style>